import React, { Component } from 'react'
import { NavLink, Redirect, Route, Switch } from 'react-router-dom'
import Header from '../../components/Header/Header'
import Cate from '../Cate/Cate'
import Home from '../Home/Home'
import Mine from '../Mine/Mine'
import Shop from '../Shop/Shop'

import './index.less'

import cate_y from '../../assets/img/cate_y.png'
import cate_n from '../../assets/img/cate_n.png'
import home_y from '../../assets/img/home_y.png'
import home_n from '../../assets/img/home_n.png'
import shop_y from '../../assets/img/shop_y.png'
import shop_n from '../../assets/img/shop_n.png'
import mine_y from '../../assets/img/mine_y.png'
import mine_n from '../../assets/img/mine_n.png'

export default class Index extends Component {
  render() {
    // console.log(this.props);
    let {location:{pathname}}=this.props;
    return (
      <div>
           {/* <Header title={'首页'}></Header> */}
            {/* 二级路由视图 */}
            <Switch>
              <Route path="/index/home" component={Home}></Route>
              <Route path="/index/cate" component={Cate}></Route>
              <Route path="/index/shop" component={Shop}></Route>

              <Route path="/index/mine" component={Mine}></Route>

              {/* 路由重定向 */}
              <Redirect to="/index/home"></Redirect>
            </Switch>
         {/* 底部导航 */}
         <footer className='footer' >
             <NavLink to="/index/home" >
               <img src={pathname==="/index/home"?home_y:home_n} alt="" />
               
              </NavLink> 
              <NavLink to="/index/cate" >
              <img src={pathname==="/index/cate"?cate_y:cate_n} alt="" />
              
              </NavLink> 
              <NavLink to="/index/shop" >
              <img src={pathname==="/index/shop"?shop_y:shop_n} alt="" />
              
              </NavLink> 
              <NavLink to="/index/mine" >
              <img src={pathname==="/index/mine"?mine_y:mine_n} alt="" />
            
              </NavLink> 
         </footer>
        </div>
    )
  }
}
